﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://jspang.com/xmlrpc.php">

<title>React免费视频教程-入门和组件 &#8211; 技术胖-胜洪宇关注web前端技术</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; Feed" href="http://jspang.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 评论Feed" href="http://jspang.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; React免费视频教程-入门和组件评论Feed" href="http://jspang.com/2017/08/15/react_basic/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/jspang.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.2"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='crayon-css'  href='style/css/crayon.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css'  href='style/css/github.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-droid-sans-mono-css'  href='style/css/droid-sans-mono.css' type='text/css' media='all' />
<link rel='stylesheet' id='smartideo_css-css'  href='style/css/smartideo.css' type='text/css' media='screen' />
<link rel='stylesheet' id='toc-screen-css'  href='style/css/screen.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r-font-awesome-front-css'  href='style/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_bootstrap-front-css'  href='style/css/bootstrap-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_animate-css'  href='style/css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='style/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='style/css/font-awesome01.min' type='text/css' media='all' />
<link rel='stylesheet' id='slicknav-css'  href='style/css/slicknav.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-stylesheet-css'  href='style/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-responsive-css'  href='style/css/responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C300italic%2C400italic%2C600%2C600italic%2C700%2C700italic&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='xhshop_css-css'  href='style/css/api-form.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/jquery.js'></script>
<script type='text/javascript' src='style/js/jquery-migrate.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/crayon.min.js'></script>
<link rel='https://api.w.org/' href='http://jspang.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jspang.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jspang.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='[非技术]我的减肥辛(心)路' href='http://jspang.com/2017/08/04/jianfei001/' />
<link rel='next' title='React免费视频教程-表单的应用' href='http://jspang.com/2017/09/07/react002/' />
<meta name="generator" content="WordPress 4.8.2" />
<link rel="canonical" href="http://jspang.com/2017/08/15/react_basic/" />
<link rel='shortlink' href='http://jspang.com/?p=2138' />
<link rel="alternate" type="application/json+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F08%2F15%2Freact_basic%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F08%2F15%2Freact_basic%2F&#038;format=xml" />
<style type="text/css">div#toc_container ul li {font-size: 80%;}</style>		<style type="text/css" id="wp-custom-css">
			/*
您可以在此处加入您的CSS。

点击上方的帮助图标来了解更多。
*/
#page-links{
    margin: 20px 5px;
	color:#222;
    line-height: 33px;
}
#page-links a{ 
    display: inline-block;
    line-height: 20px;
    padding:3px 10px 3px 10px;
    border:1px solid #ccc;
}
.toc_list li{
  list-style:none;
}		</style>
	
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f71290979fed5851ccca7bda346dcdf7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body class="post-template-default single single-post postid-2138 single-format-standard">


<header class="header">
	<div class="header-top text-center">

					<div class="text-logo">
				<a href="http://jspang.com/">技术胖-胜洪宇关注web前端技术</a>
				<p>前端免费视频第一博客。</p>
			</div><!-- /.text-logo -->
			</div><!-- /.header-top -->

	<nav class="main-menu">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div id="navigation-wrapper">
						<ul id="menu-%e9%a1%b6%e9%83%a8%e8%8f%9c%e5%8d%95" class="top-menu"><li id="menu-item-1192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1192"><a href="http://jspang.com">首页</a></li>
<li id="menu-item-1186" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1186"><a href="http://jspang.com/category/webnote/">前端日记</a></li>
<li id="menu-item-1188" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-1188"><a href="http://jspang.com/category/learn/">视频教程</a></li>
<li id="menu-item-1187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1187"><a href="http://jspang.com/category/python%e9%85%92%e5%90%a7/">Python酒吧</a></li>
<li id="menu-item-1292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1292"><a href="http://blog.jspang.com">大胖逼逼叨</a></li>
<li id="menu-item-1189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1189"><a href="http://jspang.com/category/uncategorized/">读书笔记</a></li>
<li id="menu-item-1190" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1190"><a href="http://jspang.com/category/live/">生活趣事</a></li>
<li id="menu-item-1191" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1191"><a href="http://jspang.com/resume/">自我介绍</a></li>
<li id="menu-item-1291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1291"><a href="http://jspang.com/navbar/">前端导航</a></li>
</ul>					</div>
					<div class="menu-mobile"></div>
				</div>
			</div>
		</div>
	</nav><!-- /.main-menu -->

</header><!-- /.header -->

<div class="container main-content">
	<div class="row">
		<div class="col-md-8">
			
				<article id="post-2138" class="post-2138 post type-post status-publish format-standard has-post-thumbnail hentry category-react tag-react">
            <!--
        <div class="thumbnails">
            <img width="361" height="230" src="style/images/reactLogo-1-1.jpg" class="post-thumbnail img-responsive wp-post-image" alt="" srcset="http://jspang.com/wp-content/uploads/2017/08/reactLogo-1-1.jpg 361w, http://jspang.com/wp-content/uploads/2017/08/reactLogo-1-1-300x191.jpg 300w" sizes="(max-width: 361px) 100vw, 361px" />        </div>
        -->
    
    <div class="padding-content">
        <header class="entry-header">
            <h2 class="entry-title">React免费视频教程-入门和组件</h2>        </header> <!--/.entry-header -->
        
                <div class="entry-meta">
            		<ul class="list-inline">
			<li>
                <span class="author vcard">
                    By <a class="url fn n" href="http://jspang.com/author/jspang001/">技术胖</a>                </span>
			</li>

			<li>/</li>

			<li>
				<span class="posted-on"><time class="entry-date published" datetime="2017-08-15T11:28:23+00:00">2017年8月15日</time><time class="updated hidden" datetime="2017-09-22T15:18:09+00:00">2017年9月22日</time></span>
			</li>
		</ul>
		        </div><!-- .entry-meta -->
                        <div class="entry-content">
            <div id="toc_container" class="toc_wrap_right have_bullets"><p class="toc_title">目录</p><ul class="toc_list"><li><a href="#01react">第01节：React课程介绍</a></li><li><a href="#02helloworld">第02节：环境搭建和HelloWorld程序</a></li><li><a href="#03jsx">第03节：初识JSX语法</a></li><li><a href="#04jsx">第04节：进阶JSX语法</a></li><li><a href="#05reactstate">第05节：React组件：state成员</a></li><li><a href="#06reactpropsrender">第06节：React组件：props和render成员</a></li><li><a href="#07react">第07节：React组件：生命周期</a></li><li><a href="#08react">第08节：React组件小实例-必做练习</a></li><li><a href="#09reactthispropschildren">第09节：React组件：this.props.children</a></li><li><a href="#10reactprops">第10节：React组件：props属性验证</a></li><li><a href="#11reactdom">第11节：React组件：获取真实DOM节点</a></li></ul></div>
<h1><span id="01react">第01节：React课程介绍</span></h1>
<h3>课程前言：</h3>
<p>这节课是通过微信群里的小伙伴投票的最终结果，这是一整套视频，包括React基础、React全家桶、React Native，都会讲到，但是会分开文章，这样大家可以更容易的查找。</p>
<p>本文的基础视频是全部免费观看的，只要你登录jspang.com官方网站就可以免费观看视频，视频教程放在腾讯视频上，如果你想看离线版本（百度网盘）和小伙伴们一起交流React学习知识，可以进行打赏进微信群（打赏方法看网站右侧），群公告里有网盘地址。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=w0538nsqryt&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>更新频率：</h3>
<p>由于录课只能在下班后进行，并不是专职的老师，一节课从备课到录制完成，上传网络大概需要5个小时左右。</p>
<p>所以<strong>一周只能更新2-3集（每节课程10-20分钟）</strong>，希望小伙伴们多谅解。</p>
<h3>教程特点</h3>
<p>我们常看到的React教程，上来就是构建复杂的环境，webpack，ES2015技术等繁华的技术所遮掩，其实React的核心是简单和简洁的。我们教程也会从最简朴的方式开始教学，让大家了解React的基本思想和方法。只有了解这些，你在实际工作中才可以减少出错，增加排查错误的能力。</p>
<h3>React学习Vip微信群：</h3>
<p>如果你想找到共同学习的小伙伴，并且在整个学习过程中跟技术胖一起交流（每天保证10-30分在线回答问题）。可以打赏28元后，加技术胖好友发送打赏截图，技术胖拉你入群。<strong><span style="color: #ff6600;">（录课开源不易，谢谢大家支持）</span></strong></p>
<p><strong>打赏文章后你能得到：</strong></p>
<ol>
<li>跟学习React的小伙伴一起互动学习，一起交流，技术胖并邀请一线互联网公司React大神入群和大家一同进步。</li>
<li>技术胖每天10-30分钟的课程问题解答，解决你学不会的问题，保证可以学会。</li>
<li>你的名字将留在这篇文章里，第一是表示技术胖对你的感谢，第二是你学习的见证。</li>
<li>如果打赏超过100人，技术胖在课程结束后以抽奖方式送出5本价值69元《React前端技术与工程实践》，并亲自手写感谢寄语。</li>
</ol>
<p><img class="alignnone size-medium" src="style/images/reactweixin.jpg" width="100%" /></p>
<h3>前置知识：</h3>
<p>如果你想学习本套课程还是有一定的门槛的，你需要有下面两个个基础知识。</p>
<ul>
<li>HTML+CSS：你需要会基本的html和css知识，如果你做过一年的布局工作，学习起来会更加容易。</li>
<li>JavaScript：需要扎实的JS功底，因为在React中的组件都会用到JS编写，所以你JS基础越好，学习起来越容易。</li>
</ul>
<h3>React简介：</h3>
<p>React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，开发中发现HTML5的性能下降明显，达不到预期的效果。他们就自己开发了React框架。</p>
<p>ReactJS官方地址：<a href="https://facebook.github.io/react/">https://facebook.github.io/react/</a></p>
<p>GitHub地址：<a href="https://github.com/facebook/react">https://github.com/facebook/react</a></p>
<p>react特点：</p>
<ul>
<li><strong>虚拟DOM: R</strong>eact也是以数据驱动的，每次数据变化React都会扫码整个虚拟DOM树，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。</li>
<li><strong>组件化： R</strong>eact可以从功能角度横向划分，将UI分解成不同组件，各组件都独立封装，整个UI是由一个个小组件构成的一个大组件，每个组件只关系自身的逻辑，彼此独立。</li>
<li><strong>单项数据流：</strong>React设计者认为数据双向绑定虽然便捷，但在复杂场景下副作用也是很明显，所以React更倾向于单向的数据流动-从父节点传递到子节点。（使用ReactLink也可以实现双向绑定，但不建议使用）</li>
</ul>
<h1><span id="02helloworld">第02节：环境搭建和HelloWorld程序</span></h1>
<p>如果不考虑工程化的问题，React的运行基础环境非常简单，只需要在HTML文件中引入两个js文件（react.min.js和react-dom.min.js）即可开始工作。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=y0539nxjptf&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>搭建开发环境</h3>
<p><strong>下载所需文件</strong></p>
<p>首先我们访问 https://facebook.github.io/react/,在页面中单击网页左上角的React版本（课程录制时是v15.6.1）。点击后下载两个文件。</p>
<ul>
<li><strong>react.js</strong>：实现React核心逻辑，且于具体的渲染引擎无关，从而可以跨平台公用。如果应用要迁移到React Native，这一部分逻辑是不需要改变的。</li>
<li><strong>react-dom.js：</strong>包含了具体的DOM渲染更新逻辑，以及服务端渲染的逻辑，这部分就是与浏览器相关的部分了。</li>
</ul>
<p>下载时你需要有科学上网环境，这里不作过多介绍。如果你不会科学上网，可以直接在我网站上进行下载( <a href="http://jspang.com/download/React.zip">点击下载</a>)。下载好后，你只需要在你HTML中引入这两个文件就可以编写React代码了。</p>
<h3>Hello World程序</h3>
<p>按照国际惯例，学习一个新程序知识都要写HelloWorld的。我们先动手把这个程序敲出来，然后再讲解。建立工程文件夹，这里假定为d:/react_demo.视频中使用的代码编辑工具是VSCode，你可以用其它你习惯的编辑器（如果你是前端新手，建议使用和视频中一样的编辑器，这样可以保证操作一致）。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bbfa532807320" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="reactContainer"&gt;&lt;/div&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var HelloComponent =React.createClass({
            render:function(){
                return React.createElement('h1',null,'Hello world');
            }
        });

        ReactDOM.render(
            React.createElement(HelloComponent,null),
            document.getElementById('reactContainer')
        )
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-2">2</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-4">4</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-6">6</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-8">8</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-10">10</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-12">12</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-14">14</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-16">16</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-18">18</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-20">20</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-22">22</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-24">24</div><div class="crayon-num" data-line="crayon-59f711315bbfa532807320-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bbfa532807320-26">26</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bbfa532807320-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">Document</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-8"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-9"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"reactContainer"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-12"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-13"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">HelloComponent</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createElement</span><span class="crayon-sy">(</span><span class="crayon-s">'h1'</span><span class="crayon-sy">,</span><span class="crayon-t">null</span><span class="crayon-sy">,</span><span class="crayon-s">'Hello world'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-19">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createElement</span><span class="crayon-sy">(</span><span class="crayon-v">HelloComponent</span><span class="crayon-sy">,</span><span class="crayon-t">null</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'reactContainer'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bbfa532807320-25"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bbfa532807320-26"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0386 seconds] -->
<p><strong>React.createClass</strong></p>
<p>它的作用是注册一个组件类HelloComponent,这个组件类只包含一个render函数，该函数通过调用React.createElement实现了以下HTML内容：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc0c562862932" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;h1&gt;Hello world&lt;/h1&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc0c562862932-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc0c562862932-1"><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">Hello world</span><span class="crayon-r ">&lt;/h1&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p><strong>ReactDOM.render()</strong></p>
<p>ReactDOM.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。</p>
<p><strong>总结：</strong>听完视频或者看完文章，一定要动手做出我们的Hello World程序。有个好的开始，下节课我们将学习JSX的知识。</p>
<h1><span id="03jsx">第03节：初识JSX语法</span></h1>
<p>JSX即Javascript XML，它使用XML标记来创建虚拟DOM和声明组件。第02节的HelloWorld程序从本质上能完成所有的工作。只是有一些开发效率问题，比如JavaScript代码与标签混写在一起、缺乏模板支持等。而使用JSX，则可以有效解决这些问题。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=h05408kjv1a&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>加入JSX语法支持</h3>
<p>如果要使用JSX语法的支持，你可以使用Babel来进行转换，但是为了讲解方便我们这里直接引入Babel的核心文件 browser.min.js。你可以去网上提供的静态资源库引用（<a href="http://www.bootcdn.cn/">http://www.bootcdn.cn/</a>），也可以自己下载。</p>
<p>重写HelloWorld</p>
<p>上节课写的HelloWorld程序，这节课我们用JSX的方式进行重写。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc13738850202" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
   
    
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="reactContainer"&gt;&lt;/div&gt;
   
   
    &lt;script type="text/babel"&gt;
        var HelloComponent =React.createClass({
            render:function(){
                return &lt;h1&gt;Hello World&lt;/h1&gt;;
            }
        });

        ReactDOM.render(
            &lt;HelloComponent/&gt;,
            document.getElementById('reactContainer')
        )
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc13738850202-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-24">24</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-26">26</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-28">28</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc13738850202-30">30</div><div class="crayon-num" data-line="crayon-59f711315bc13738850202-31">31</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc13738850202-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">Document</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-11"><span class="crayon-i ">&nbsp;&nbsp; </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-12"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-13"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"reactContainer"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-16"><span class="crayon-i ">&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-17"><span class="crayon-i ">&nbsp;&nbsp; </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-18"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">HelloComponent</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-v">h1</span><span class="crayon-o">&gt;</span><span class="crayon-e">Hello </span><span class="crayon-v">World</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h1</span><span class="crayon-o">&gt;</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-24">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc13738850202-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">HelloComponent</span><span class="crayon-c ">/&gt;,</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-27"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('reactContainer')</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-28"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-29"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc13738850202-30"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc13738850202-31"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0168 seconds] -->
<p>通过上边的代码你可以发现JSX的好处。</p>
<ul>
<li>可以使用熟悉的语法仿照HTML来定义虚拟DOM。</li>
<li>程序代码更加直观。</li>
<li>于JavaScript之间等价转换，代码更加直观。</li>
</ul>
<h3>JSX中的表达式</h3>
<p>JSX是支持表达式的，你只要使用{}括号，就可以使用表达式了。我们把HelloWorld程序改写成使用表达式的。</p>
<p>我们把上边的程序改写成带表达式的形式。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc1a047120006" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var HelloComponent =React.createClass({
    render:function(){
        return &lt;h1&gt;Hello {this.props.name?this.props.name:'world'}&lt;/h1&gt;;
    }
});

ReactDOM.render(
    &lt;HelloComponent name="jspang"/&gt;,
    document.getElementById('reactContainer')
)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc1a047120006-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc1a047120006-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc1a047120006-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc1a047120006-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc1a047120006-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc1a047120006-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc1a047120006-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc1a047120006-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc1a047120006-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc1a047120006-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc1a047120006-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">HelloComponent</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc1a047120006-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc1a047120006-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">h1</span><span class="crayon-o">&gt;</span><span class="crayon-e">Hello</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">props</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">?</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">props</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'world'</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h1</span><span class="crayon-o">&gt;</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc1a047120006-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f711315bc1a047120006-5"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc1a047120006-6">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc1a047120006-7"><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc1a047120006-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">HelloComponent </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"jspang"</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc1a047120006-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'reactContainer'</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc1a047120006-10"><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0110 seconds] -->
<p>需要注意的是表达式不支持if&#8230;else这样的语句，但是支持三元运算符和二元运算符。</p>
<h1><span id="04jsx">第04节：进阶JSX语法</span></h1>
<p>上节课我们已经对JSX语法有了一定的了解，这节课我们再深入了解一下，作两个复杂一点的例子。目的是大家充分理解JSX的知识，并加以练习和熟悉。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=r0540g490uu&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>JSX上的数组输出</h3>
<p>使用JSX输出数组是有些小坑需要迈过的，在两年前我自学React时，没人指导，那时候中文的教程也很少，所以会迈一些坑，我觉的我教程的价值也是帮助大家卖坑，有些坑你在看文档是经常会跌入迈不出来。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc21727956067" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="reactContainer"&gt;&lt;/div&gt;


    &lt;script type="text/babel"&gt;
        let names = ['JSPang','技术胖','React']; var HelloComponent =React.createClass({ render:function(){ return
        &lt;div&gt;
            { names.map(function(name){ return
            &lt;div key={name}&gt;Hello,{name}!&lt;/div&gt;
            }) }
        &lt;/div&gt;
        } }); ReactDOM.render(
        &lt;HelloComponent name="jspang" /&gt;, document.getElementById('reactContainer') )
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc21727956067-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-24">24</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-26">26</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-28">28</div><div class="crayon-num" data-line="crayon-59f711315bc21727956067-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc21727956067-30">30</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc21727956067-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-4"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">Document</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-12"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"reactContainer"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-16">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc21727956067-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-18"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">let </span><span class="crayon-v">names</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'JSPang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'React'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">HelloComponent</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-st">return</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">names</span><span class="crayon-sy">.</span><span class="crayon-e">map</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-r">name</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-st">return</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">div </span><span class="crayon-v">key</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">name</span><span class="crayon-sy">}</span><span class="crayon-o">&gt;</span><span class="crayon-v">Hello</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span><span class="crayon-r">name</span><span class="crayon-sy">}</span><span class="crayon-o">!</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">HelloComponent </span><span class="crayon-r">name</span><span class="crayon-o">=</span><span class="crayon-s">"jspang"</span><span class="crayon-h"> </span><span class="crayon-c ">/&gt;, document.getElementById('reactContainer') )</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-27"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-28"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc21727956067-29">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc21727956067-30"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0288 seconds] -->
<p>上边的代码，我们使用了ES6的语法maps来进行进行循环，循环时需要注意的是，新版本的React需要使用key，如果没有key虽然会出来效果，但是控制台会包错。key的作用是生成虚拟DOM时，需要使用key来进行标记,DOM更新时进行比较。</p>
<h3>数组中的JSX</h3>
<p>我们上边的例子是循环数组的内容到JSX中，其实在数组中可以直接使用JSX语法，看下面的例子。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc28124740224" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=[
    &lt;h1 key="1"&gt;Hello world!&lt;/h1&gt;,
    &lt;h2 key="2"&gt; React is awesome&lt;/h2&gt;
];
ReactDOM.render(
&lt;div&gt;{arr}&lt;/div&gt;, document.getElementById('reactContainer') )</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc28124740224-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc28124740224-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc28124740224-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc28124740224-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc28124740224-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc28124740224-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc28124740224-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc28124740224-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">h1 </span><span class="crayon-v">key</span><span class="crayon-o">=</span><span class="crayon-s">"1"</span><span class="crayon-o">&gt;</span><span class="crayon-e">Hello </span><span class="crayon-v">world</span><span class="crayon-o">!</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h1</span><span class="crayon-o">&gt;</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc28124740224-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">h2 </span><span class="crayon-v">key</span><span class="crayon-o">=</span><span class="crayon-s">"2"</span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">React </span><span class="crayon-st">is</span><span class="crayon-h"> </span><span class="crayon-v">awesome</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc28124740224-4"><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc28124740224-5"><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc28124740224-6"><span class="crayon-o">&lt;</span><span class="crayon-e">div</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span><span class="crayon-v">arr</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'reactContainer'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0085 seconds] -->
<p>JSX允许直接在模版插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。</p>
<p>总结：通过两节课的我们对JSX有了初步认识，虽然React可以不使用任何其他插件，但是JSX的好处太多，React也鼓励使用，在实际工作中也是百分百使用的，所以以后的课程中我们都会使用JSX。</p>
<h1><span id="05reactstate">第05节：React组件：state成员</span></h1>
<p>从前面的课程中，已经初步认识了组件，但是并没有进行详细讲解，从这节课开始用3-5节课的时间，具体讲一下React组件的作用。React组件可以把它看作带有props属性集合和state状态集合并且构造出一个虚拟DOM结构的对象。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=j05410xilpv&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>state成员</h3>
<p>组件总是需要和用户互动的。React的一大创新，就是将界面组件看成一个状态机，用户界面拥有不同状态并根据状态进行渲染输出，用户界面和数据始终保持一致。开发者的主要工作就是定义state，并根据不同的state渲染对应的用户界面。</p>
<h4>setState()</h4>
<p>通知React组件数据发生变化的方法是调用成员函数setState(data,callback)。这个函数会合并data到this.state,并重新渲染组件。渲染完成后，调用可选的callback回调。（大部分情况下不需要调用回调，因为React会负责把界面更新到最新状态）</p>
<p><strong>动手敲个小例子</strong></p>
<p>我们用一个小例子来了解一下状态机的机制。该例子包含一个文本框和一个按钮，单击按钮可以改变文本框的编辑状态：禁止编辑或允许编辑。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc2f273212081" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="reactContainer"&gt;&lt;/div&gt;


    &lt;script type="text/babel"&gt;
        var  TextBoxComponent = React.createClass({
            getInitialState:function(){
                return {enable:false}
            },
            handleClick:function(event){
                this.setState({enable:!this.state.enable})
            },
            render:function(){
                return (
                    &lt;p&gt;
                        &lt;input type="text" disabled={this.state.enable} /&gt;
                        &lt;button onClick={this.handleClick}&gt;改变textbox状态&lt;/button&gt;
                    &lt;/p&gt;
                )
            }
        });

        ReactDOM.render(&lt;TextBoxComponent/&gt;,document.getElementById("reactContainer"));
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-24">24</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-26">26</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-28">28</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-30">30</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-32">32</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-34">34</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-36">36</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-38">38</div><div class="crayon-num" data-line="crayon-59f711315bc2f273212081-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc2f273212081-40">40</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc2f273212081-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-4"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">Document</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-12"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"reactContainer"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-16">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc2f273212081-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-18"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">TextBoxComponent</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">getInitialState</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">enable</span><span class="crayon-o">:</span><span class="crayon-t">false</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">handleClick</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setState</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">enable</span><span class="crayon-o">:</span><span class="crayon-o">!</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">enable</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">p</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-v">disabled</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">enable</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">button </span><span class="crayon-r">onClick</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleClick</span><span class="crayon-sy">}</span><span class="crayon-o">&gt;</span>改变<span class="crayon-i">textbox</span>状态<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">button</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">p</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-33"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-34"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-35">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-v">TextBoxComponent</span><span class="crayon-c ">/&gt;,document.getElementById("reactContainer"));</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-37"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-38"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc2f273212081-39">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc2f273212081-40"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0320 seconds] -->
<p>程序中需要注意的点</p>
<ol>
<li>getInitialState函数必须有返回值，可以是null,false,一个对象。</li>
<li>访问state数据的方法是&#8221;this.state.属性名&#8221;。</li>
<li>变量用{}包裹，不需要再加双引号。</li>
</ol>
<h1><span id="06reactpropsrender">第06节：React组件：props和render成员</span></h1>
<p>props是组件固有属性的集合，其数据由外部传入，一般在整个组件的生命周期中都是只读的。属性的初识值通常由React.createElement函数或者JSX中标签的属性值进行传递，并合并到组件实例对象的this.props中。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=p0542zdnpr8&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>props实例</h3>
<p>这里一点点写一个真实的props程序，并让大家更加了解如何定义props。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc37989630262" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React-props&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
        let HelloBox=React.createClass({
            render:function(){
                return &lt;div&gt;{'Hello '+this.props.myattr}&lt;/div&gt;;
            }
        })
        ReactDOM.render(&lt;HelloBox myattr="world"/&gt;,document.getElementById("demo"));
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc37989630262-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc37989630262-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc37989630262-23">23</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc37989630262-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React-props</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-11"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-12"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-13"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"demo"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-14"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">let </span><span class="crayon-v">HelloBox</span><span class="crayon-o">=</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">div</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span><span class="crayon-s">'Hello '</span><span class="crayon-o">+</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">props</span><span class="crayon-sy">.</span><span class="crayon-v">myattr</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-e">HelloBox </span><span class="crayon-e ">myattr</span><span class="crayon-o">=</span><span class="crayon-s">"world"</span><span class="crayon-c ">/&gt;,document.getElementById("demo"));</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-21"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc37989630262-22"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc37989630262-23"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0191 seconds] -->
<p>我们不应该修改props中的值。事实上，如果要在组件外更改也是一个很麻烦的事，需要找到组件实例，这没有必要。在设计组件时，就要想好组件哪些使用state，哪些使用props集合，那些使用state集合。通常固定的组件内只读的、应由父组件传递进来的属性适合放在props集合中，如组件的类名、颜色、字体、事件响应回调函数等。</p>
<h3>props与state的区别</h3>
<p>props不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改；state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。</p>
<h3>render成员函数</h3>
<p>首先说render是一个函数，它对于组件来说，render成员函数是必需的。render函数的主要流程是检测this.props和this.state,再返回一个单一组件实例。</p>
<p>render函数应该是纯粹的，也就是说，在render函数内不应该修改组件state，不读写DOM信息，也不与浏览器交互。如果需要交互，应该在生命周期中进行交互。</p>
<h1><span id="07react">第07节：React组件：生命周期</span></h1>
<p>一个组件完整的生命周期包含实例化阶段、活动阶段、销毁阶段三个阶段。每个阶段又由相应的方法管理。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=a05437wdlzp&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>过程中涉及三个主要的动作术语：</p>
<ul>
<li>mounting:表示正在挂接虚拟DOM到真实DOM。</li>
<li>updating:表示正在被重新渲染。</li>
<li>unmounting:表示正在将虚拟DOM移除真实DOM。</li>
</ul>
<p>每个动作术语提供两个函数：</p>
<blockquote>
<ul>
<li>componentWillMount()</li>
<li>componentDidMount()</li>
<li>componentWillUpdate(object nextProps, object nextState)</li>
<li>componentDidUpdate(object prevProps, object prevState)</li>
<li>componentWillUnmount()</li>
</ul>
<p>&nbsp;</p></blockquote>
<h3>实例编写</h3>
<p>通过一个简单的实例，来看React组件的生命周期。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc40317224037" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React-props&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
       var AddCount=React.createClass({
           getInitialState:function(){
               console.log('1...getInitialSate');
               return {count:1};
           },
           componentWillMount:function(){
            console.log('2...componentWillMount');
           },
           componentDidMount:function(){
               console.log('3...componentDidMount');
           },
           componentWillUpdate:function(){
               console.log('4...componentWillUpdate');
           },
           componentDidUpdate:function(){
               console.log('4...componentDidUpdate');
           },
           handleClick:function(event){
               this.setState({count:this.state.count+1})
           },

           render:function(){
               return(
                   &lt;p&gt;
                    {this.state.count}&lt;br/&gt;
                    &lt;button onClick={this.handleClick}&gt;Add&lt;/button&gt;
                   &lt;/p&gt;
               )
           }
       })

       ReactDOM.render(
           &lt;AddCount/&gt;,
            document.getElementById("demo")
       );
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc40317224037-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-24">24</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-26">26</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-28">28</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-30">30</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-32">32</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-34">34</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-36">36</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-38">38</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-40">40</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-42">42</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-44">44</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-46">46</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-48">48</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-49">49</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-50">50</div><div class="crayon-num" data-line="crayon-59f711315bc40317224037-51">51</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc40317224037-52">52</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc40317224037-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React-props</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-11"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-12"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-13"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"demo"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-14"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">AddCount</span><span class="crayon-o">=</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">getInitialState</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'1...getInitialSate'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">count</span><span class="crayon-o">:</span><span class="crayon-cn">1</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">componentWillMount</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'2...componentWillMount'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">componentDidMount</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'3...componentDidMount'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">componentWillUpdate</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'4...componentWillUpdate'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">componentDidUpdate</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'4...componentDidUpdate'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">handleClick</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-33"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setState</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">count</span><span class="crayon-o">:</span><span class="crayon-v">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">count</span><span class="crayon-o">+</span><span class="crayon-cn">1</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-34"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-35">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-37"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-38"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">p</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-39"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">count</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-40"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">button </span><span class="crayon-r">onClick</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleClick</span><span class="crayon-sy">}</span><span class="crayon-o">&gt;</span><span class="crayon-v">Add</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">button</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-41"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">p</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-42"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-43"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-44"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-45">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-46"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-47"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">AddCount</span><span class="crayon-c ">/&gt;,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-48"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("demo")</span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-49"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; );</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-50"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc40317224037-51"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc40317224037-52"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0394 seconds] -->
<p>这个案例在每个生命周期里都加入了输出语句，我们可以打开控制台看代码的执行过程。</p>
<h1><span id="08react">第08节：React组件小实例-必做练习</span></h1>
<p>在了解了基本的钩子函数后，我们再作一个跟生命周期有关的小效果，进一步了解生命周期的用途。练习这个案例还可以对React的State和props有更深入的了解。这个案例是自定义一个组件，并把组件进行不断闪烁，形成一种动画形式。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=z0543c459ii&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc4c723949948" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;生命周期案例&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
      var Hello = React.createClass({
          getInitialState:function(){
              return {
                  opacity:1.0
              }
          },
          componentDidMount: function () {
            setInterval(function () {
                var opacity = this.state.opacity;
                opacity -= .05;
                if (opacity &lt; 0.1) {
                    opacity = 1.0;
                }
                this.setState({
                    opacity: opacity
                });
                }.bind(this), 100);
          },

          render:function(){
              return (
                  &lt;div style={{opacity:this.state.opacity}}&gt;
                       &lt;h2&gt;Hello {this.props.name}&lt;/h2&gt; 
                  &lt;/div&gt;
              )
          }
      });
      ReactDOM.render(
          &lt;Hello name="world"/&gt;,
          document.getElementById('demo')
      )
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-24">24</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-26">26</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-28">28</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-30">30</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-32">32</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-34">34</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-36">36</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-38">38</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-40">40</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-42">42</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-44">44</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-46">46</div><div class="crayon-num" data-line="crayon-59f711315bc4c723949948-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc4c723949948-48">48</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc4c723949948-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-v">html</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-2"><span class="crayon-o">&lt;</span><span class="crayon-e">html </span><span class="crayon-v">lang</span><span class="crayon-o">=</span><span class="crayon-s">"en"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-3"><span class="crayon-o">&lt;</span><span class="crayon-v">head</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">meta </span><span class="crayon-v">charset</span><span class="crayon-o">=</span><span class="crayon-s">"UTF-8"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">meta </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"viewport"</span><span class="crayon-h"> </span><span class="crayon-v">content</span><span class="crayon-o">=</span><span class="crayon-s">"width=device-width, initial-scale=1.0"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">meta </span><span class="crayon-v">http</span><span class="crayon-o">-</span><span class="crayon-v">equiv</span><span class="crayon-o">=</span><span class="crayon-s">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-v">content</span><span class="crayon-o">=</span><span class="crayon-s">"ie=edge"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">title</span><span class="crayon-o">&gt;</span>生命周期案例<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-e">title</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-11"><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">head</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-12"><span class="crayon-o">&lt;</span><span class="crayon-v">body</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">div </span><span class="crayon-v">id</span><span class="crayon-o">=</span><span class="crayon-s">"demo"</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-e">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">Hello</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">getInitialState</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">opacity</span><span class="crayon-o">:</span><span class="crayon-cn">1.0</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">componentDidMount</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">setInterval</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">opacity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">opacity</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">opacity</span><span class="crayon-h"> </span><span class="crayon-o">-=</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-cn">05</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">opacity</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-h"> </span><span class="crayon-cn">0.1</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">opacity</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setState</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">opacity</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">opacity</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">.</span><span class="crayon-e">bind</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-33">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-34"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-35"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">div </span><span class="crayon-v">style</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-v">opacity</span><span class="crayon-o">:</span><span class="crayon-v">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">opacity</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-37"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">h2</span><span class="crayon-o">&gt;</span><span class="crayon-e">Hello</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">props</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-38"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-39"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-40"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-41"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-42"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-43"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">Hello </span><span class="crayon-r">name</span><span class="crayon-o">=</span><span class="crayon-s">"world"</span><span class="crayon-c ">/&gt;,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-44"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('demo')</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-45"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-46"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc4c723949948-47"><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">body</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc4c723949948-48"><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">html</span><span class="crayon-o">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0421 seconds] -->
<p></p>
<h1><span id="09reactthispropschildren">第09节：React组件：this.props.children</span></h1>
<p>this.props对象的属性与组件的属性一一对应，但有一个例外，就是this.props.children属性。它表示组件的所有子节点。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=c0544deyc0w&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>子节点</h3>
<p>组件经常会写入很多子属性，就像我们HTML当中的&lt;ul&gt;下，一定有很多&lt;li&gt;标签。这种子属性的需求，就要用到this.props.children属性。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc54375105529" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React-props&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
        var NotesList=React.createClass({ render:function(){ return(
        &lt;ol&gt;
            { React.Children.map(this.props.children,function(child){ return(
            &lt;li&gt;{child}&lt;/li&gt;) }) }
        &lt;/ol&gt;
        ) } }); ReactDOM.render(
        &lt;NotesList&gt;
            &lt;span&gt;hello&lt;/span&gt;
            &lt;span&gt;world&lt;/span&gt;
        &lt;/NotesList&gt;, document.getElementById("demo") );

    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc54375105529-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-24">24</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-26">26</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-28">28</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc54375105529-30">30</div><div class="crayon-num" data-line="crayon-59f711315bc54375105529-31">31</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc54375105529-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-4"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React-props</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-12"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"demo"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-16"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">NotesList</span><span class="crayon-o">=</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">ol</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-v">Children</span><span class="crayon-sy">.</span><span class="crayon-e">map</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">props</span><span class="crayon-sy">.</span><span class="crayon-v">children</span><span class="crayon-sy">,</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-r">child</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">li</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span><span class="crayon-r">child</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-c ">/ol&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-22"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) } }); ReactDOM.render(</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-23"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;NotesList&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-24"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;hello&lt;/s</span><span class="crayon-v">pan</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">span</span><span class="crayon-o">&gt;</span><span class="crayon-v">world</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">span</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-c ">/NotesList&gt;, document.getElementById("demo") );</span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-27">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-28"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc54375105529-29"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc54375105529-30">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc54375105529-31"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0221 seconds] -->
<p>上面代码的NoteList组件有两个span子节点，他们都可以通过this.props.children读取。这里需要注意，this.props.children的值有三种可能，如果当前组件没有子节点，他就是undfined；如果有一个子节点，数据类型是object；如果有多个子节点，数据类型就是array。所以处理this.proprs.children的时候要小心。</p>
<h1><span id="10reactprops">第10节：React组件：props属性验证</span></h1>
<p>组件的属性是可以接收任何值的，但有时候我们希望对外界父级组件传递进来的属性数据进行限定，比如希望name属性不能缺少、onClick属性必须是函数类型等，这对确保组件被正确使用非常有意义。为此React引入了propTypes机制。React.PropTypes提供各种验证器（validator）来验证传入数据的有效性。当向props传入无效数据时，React会在JavaScript控制台抛出警告。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=p054439coes&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>PropsTypes</h3>
<p>我们来作一个小列子，看一下PropTypes的用法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc5c791779987" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React-props&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
       var MyTitle = React.createClass({
           propTypes:{
                title:React.PropTypes.string.isRequired,
           },

           render:function(){
               return &lt;h2&gt;{this.props.title}&lt;/h2&gt;
           }
       })
       var data=123;
       ReactDOM.render(&lt;MyTitle title={data}/&gt;,document.getElementById('demo'));

    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-24">24</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-26">26</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-28">28</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-30">30</div><div class="crayon-num" data-line="crayon-59f711315bc5c791779987-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc5c791779987-32">32</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc5c791779987-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-4"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React-props</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-12"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"demo"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-16"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">MyTitle</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">propTypes</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">title</span><span class="crayon-o">:</span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-v">PropTypes</span><span class="crayon-sy">.</span><span class="crayon-t">string</span><span class="crayon-sy">.</span><span class="crayon-v">isRequired</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-21">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">h2</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">props</span><span class="crayon-sy">.</span><span class="crayon-v">title</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">data</span><span class="crayon-o">=</span><span class="crayon-cn">123</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-e">MyTitle </span><span class="crayon-v">title</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">data</span><span class="crayon-sy">}</span><span class="crayon-c ">/&gt;,document.getElementById('demo'));</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-28">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc5c791779987-29"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-30"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc5c791779987-31">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc5c791779987-32"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0214 seconds] -->
<p>上面的代码，我们创建了一个组件，组件里有一个title属性。PropTypes告诉React，这个title属性是必须的，而且它的值必须是字符串。而我们在程序中却给它设置为数值。打开浏览器控制台你可以看到报错信息。</p>
<p>更多的PropTypes的设置，可以查看<a href="https://facebook.github.io/react/docs/components-and-props.html">官方文档</a>。</p>
<h3>getDefaultProps默认值设置</h3>
<p>使用getDefaultProps方法可以用来设置组件属性的默认值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc63617666594" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var MyTitle = React.createClass({
    
    getDefaultProps:function(){
        return {
            title:'Hello JSPang'
        }
    },

    render:function(){
        return &lt;h2&gt;{this.props.title}&lt;/h2&gt;
    }
})

ReactDOM.render(&lt;MyTitle/&gt;,document.getElementById('demo'));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc63617666594-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc63617666594-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc63617666594-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc63617666594-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc63617666594-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc63617666594-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc63617666594-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc63617666594-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc63617666594-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc63617666594-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc63617666594-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc63617666594-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc63617666594-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc63617666594-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc63617666594-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">MyTitle</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc63617666594-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-59f711315bc63617666594-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">getDefaultProps</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc63617666594-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc63617666594-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">title</span><span class="crayon-o">:</span><span class="crayon-s">'Hello JSPang'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc63617666594-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f711315bc63617666594-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc63617666594-8">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc63617666594-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc63617666594-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">h2</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">props</span><span class="crayon-sy">.</span><span class="crayon-v">title</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc63617666594-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc63617666594-12"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f711315bc63617666594-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc63617666594-14"><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-v">MyTitle</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span><span class="crayon-sy">,</span><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'demo'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0109 seconds] -->
<p>浏览器这时候显示的是Hello World。</p>
<h1><span id="11reactdom">第11节：React组件：获取真实DOM节点</span></h1>
<p>React中的DOM也是虚拟DOM（virtual DOM），这点跟我们以前讲的Vue非常类似。只有当它插入文档以后，才会变成真实的DOM。React也是在虚拟DOM发生变化时，进行比对后，只渲染变化的部分，它是React极高性能的主要原因之一。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=j0545qknjt8&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>但是有时候我们需要从组件中获取真实的DOM节点，来进行业务逻辑的编写，React为我们提供了ref属性。下面我们通过一个实例来了解Ref的用法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f711315bc68510906097" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React-props&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
        var MyComponent = React.createClass({
            handleClick:function(){
                this.refs.myTextInput.focus();
            },
            render:function(){
                return(
                    &lt;div&gt;
                        &lt;input type="text" ref="myTextInput" /&gt;
                        &lt;input type="button" value="Focus the text input" onClick={this.handleClick}/&gt;
                    &lt;/div&gt;
                )
            }
        });

        ReactDOM.render(
            &lt;MyComponent/&gt;,
            document.getElementById("demo")
        )

    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f711315bc68510906097-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-2">2</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-4">4</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-6">6</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-8">8</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-10">10</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-12">12</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-14">14</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-16">16</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-18">18</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-20">20</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-22">22</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-24">24</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-26">26</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-28">28</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-30">30</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-32">32</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-34">34</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-36">36</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f711315bc68510906097-38">38</div><div class="crayon-num" data-line="crayon-59f711315bc68510906097-39">39</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f711315bc68510906097-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-4"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React-props</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-12"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"demo"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-16"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">MyComponent</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">handleClick</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">refs</span><span class="crayon-sy">.</span><span class="crayon-v">myTextInput</span><span class="crayon-sy">.</span><span class="crayon-e">focus</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-sy">(</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-r">ref</span><span class="crayon-o">=</span><span class="crayon-s">"myTextInput"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"button"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span><span class="crayon-o">=</span><span class="crayon-s">"Focus the text input"</span><span class="crayon-h"> </span><span class="crayon-r">onClick</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleClick</span><span class="crayon-sy">}</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-30">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc68510906097-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">MyComponent</span><span class="crayon-c ">/&gt;,</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-33"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("demo")</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-34"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)</span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-35">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-36"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line" id="crayon-59f711315bc68510906097-37"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f711315bc68510906097-38">&nbsp;</div><div class="crayon-line" id="crayon-59f711315bc68510906097-39"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0211 seconds] -->
<p>这个案例很简单，就是有一个文本框，当你点击按钮时，光标定位到文本框里。这时就必须获取真实的DOM节点，虚拟DOM是拿不到用户输入的。为了做到这一点，文本框必须有一个ref属性，用this.refs.xxx就可以返回真实的DOM节点。</p>
<p><span style="color: #ff0000;">注意：</span></p>
<p>由于this.refs.[refName]属性获取的是真实DOM，所以必须得到虚拟DOM插入文档以后，才能使用这个属性，否则会报错。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
        <div class="gave" >
            <a href="javascript:;" id="gave">打赏</a>
            <div class="code" id="wechatCode" style="display: none">
                <img src="style/images/20170518151055111.png" alt="微信扫一扫支付">
                <div><img src="style/images/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></div>
            </div>
        </div>        </div> <!-- //.entry-content -->
               <br>
        <div class="entry-tags text-left">标签：<a href="http://jspang.com/tag/react/" rel="tag">React</a></div>
    </div>

</article><!-- #post-## -->                              
				<div class="user-profile media">
    <div class="pull-left author-avater">
        <img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-110.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=220&amp;d=mm&amp;r=g 2x' class='avatar avatar-110 photo' height='110' width='110' />    </div>
    <div class="media-body">
        <div class="profile-heading">
            <h3><a href="http://jspang.com/author/jspang001/" title="由技术胖发布" rel="author">技术胖</a></h3>
        </div>
        <div class="website-link">http://jspang.com</div>
        <div class="author-description">
                    </div>
    </div>
</div><!-- .user-profile -->                               
				
	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">文章导航</h2>
		<div class="nav-links"><div class="nav-previous"><a href="http://jspang.com/2017/08/04/jianfei001/" rel="prev"><i class="fa fa-angle-left"></i> Previous Post</a></div><div class="nav-next"><a href="http://jspang.com/2017/09/07/react002/" rel="next">Next Post <i class="fa fa-angle-right"></i></a></div></div>
	</nav>
									<div class="comment-box">
						<div id="comments" class="comments-area comments">
            <h3 class="common-title comments-title">
            31 Comments        </h3>

        <ul class="comment-list">

            			<li class="comment even thread-even depth-1" id="li-comment-405">
				<div id="comment-405" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/b045301851c01a2c2022cc50ec6702ad-75.jpg' srcset='http://2.gravatar.com/avatar/b045301851c01a2c2022cc50ec6702ad?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小刘同志</h3>							<span class="comment-date">2017年8月15日</span>
						</div>

						
						<div class="comment-content">
							<p>爱你技术胖</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=405#respond' onclick='return addComment.moveForm( "comment-405", "405", "respond", "2138" )' aria-label='回复给小刘同志'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-406">
				<div id="comment-406" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/6c30389bf35500236334e59d362b4cb9-75.jpg' srcset='http://0.gravatar.com/avatar/6c30389bf35500236334e59d362b4cb9?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">哈哈</h3>							<span class="comment-date">2017年8月15日</span>
						</div>

						
						<div class="comment-content">
							<p>6 啊我的胖哥</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=406#respond' onclick='return addComment.moveForm( "comment-406", "406", "respond", "2138" )' aria-label='回复给哈哈'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-409">
				<div id="comment-409" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e809cd9a0a40204f1331a744dedd16d9-75.jpg' srcset='http://2.gravatar.com/avatar/e809cd9a0a40204f1331a744dedd16d9?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">wxq</h3>							<span class="comment-date">2017年8月15日</span>
						</div>

						
						<div class="comment-content">
							<p>超级棒！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=409#respond' onclick='return addComment.moveForm( "comment-409", "409", "respond", "2138" )' aria-label='回复给wxq'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-410">
				<div id="comment-410" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月15日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢你的支持，视频还在录制中，你算前排了。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=410#respond' onclick='return addComment.moveForm( "comment-410", "410", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-411">
				<div id="comment-411" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/6f8057190c1e444f2933778be22e8e8b-75.jpg' srcset='http://0.gravatar.com/avatar/6f8057190c1e444f2933778be22e8e8b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">gss</h3>							<span class="comment-date">2017年8月15日</span>
						</div>

						
						<div class="comment-content">
							<p>拥抱胖哥</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=411#respond' onclick='return addComment.moveForm( "comment-411", "411", "respond", "2138" )' aria-label='回复给gss'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-412">
				<div id="comment-412" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月15日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢支持，我会更加努力的录课回报大家。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=412#respond' onclick='return addComment.moveForm( "comment-412", "412", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-414">
				<div id="comment-414" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/f50345648f810a194428e18fb4422e89-75.jpg' srcset='http://0.gravatar.com/avatar/f50345648f810a194428e18fb4422e89?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">deon</h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>沙发</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=414#respond' onclick='return addComment.moveForm( "comment-414", "414", "respond", "2138" )' aria-label='回复给deon'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-416">
				<div id="comment-416" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>已经不是沙发了。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=416#respond' onclick='return addComment.moveForm( "comment-416", "416", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-417">
				<div id="comment-417" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/2b4a5509ee57b51ce210b93da15a6ab1-75.jpg' srcset='http://2.gravatar.com/avatar/2b4a5509ee57b51ce210b93da15a6ab1?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">hawk</h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>前天还在看你有没有react的视频，今天就出来了，大爱</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=417#respond' onclick='return addComment.moveForm( "comment-417", "417", "respond", "2138" )' aria-label='回复给hawk'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-418">
				<div id="comment-418" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>嗯，今天会更新第二节。希望一起学习进步。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=418#respond' onclick='return addComment.moveForm( "comment-418", "418", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-419">
				<div id="comment-419" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/3c6f973a654c6da8a067432df7bdaad7-75.jpg' srcset='http://0.gravatar.com/avatar/3c6f973a654c6da8a067432df7bdaad7?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">技术渣</h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>哈哈，看到群公告就过来了，支持Jspang。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=419#respond' onclick='return addComment.moveForm( "comment-419", "419", "respond", "2138" )' aria-label='回复给技术渣'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-420">
				<div id="comment-420" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/a52bd67e1a860067c2ec541a86a0014e-75.jpg' srcset='http://1.gravatar.com/avatar/a52bd67e1a860067c2ec541a86a0014e?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">夏雨</h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>我还是比较青睐于胖哥你的Node教程或者其他后台的教程,！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=420#respond' onclick='return addComment.moveForm( "comment-420", "420", "respond", "2138" )' aria-label='回复给夏雨'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-423">
				<div id="comment-423" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>以后会出的，谢谢你一直的支持。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=423#respond' onclick='return addComment.moveForm( "comment-423", "423", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-421">
				<div id="comment-421" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/26d50219b2dcc02a30ecbf005e5a389b-75.jpg' srcset='http://2.gravatar.com/avatar/26d50219b2dcc02a30ecbf005e5a389b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">黑胖</h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>感动！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=421#respond' onclick='return addComment.moveForm( "comment-421", "421", "respond", "2138" )' aria-label='回复给黑胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-425">
				<div id="comment-425" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ece6e5394f23ae0318fe5b541ac38af4-75.jpg' srcset='http://2.gravatar.com/avatar/ece6e5394f23ae0318fe5b541ac38af4?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">hking</h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>公司刚好要用react native了，真是及时雨啊，感谢胖老师！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=425#respond' onclick='return addComment.moveForm( "comment-425", "425", "respond", "2138" )' aria-label='回复给hking'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-426">
				<div id="comment-426" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>能帮助到你，我也很高兴。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=426#respond' onclick='return addComment.moveForm( "comment-426", "426", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-433">
				<div id="comment-433" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ada94656691de2d7ffc52d9b2afbcddc-75.jpg' srcset='http://1.gravatar.com/avatar/ada94656691de2d7ffc52d9b2afbcddc?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Lee</h3>							<span class="comment-date">2017年8月17日</span>
						</div>

						
						<div class="comment-content">
							<p>为什么还用一年前都不推荐的方式讲解呢，建议es6吧，script引入的方式，太不推荐了。学以致用，真实项目没有这样搞的</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=433#respond' onclick='return addComment.moveForm( "comment-433", "433", "respond", "2138" )' aria-label='回复给Lee'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-434">
				<div id="comment-434" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月17日</span>
						</div>

						
						<div class="comment-content">
							<p>如果有些小伙伴不会ES6那，我希望照顾所有小伙伴，让他们容易入手。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=434#respond' onclick='return addComment.moveForm( "comment-434", "434", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even depth-2" id="li-comment-444">
				<div id="comment-444" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/2628a391544e72412e3ce0502bbae74f-75.jpg' srcset='http://2.gravatar.com/avatar/2628a391544e72412e3ce0502bbae74f?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">11</h3>							<span class="comment-date">2017年8月18日</span>
						</div>

						
						<div class="comment-content">
							<p>我也觉得，而且技术胖其实之前都写了es6教程了。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=444#respond' onclick='return addComment.moveForm( "comment-444", "444", "respond", "2138" )' aria-label='回复给11'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-436">
				<div id="comment-436" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ffd04b0f7c59cbd8600ba9711fedf0b6-75.jpg' srcset='http://0.gravatar.com/avatar/ffd04b0f7c59cbd8600ba9711fedf0b6?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">一曲秦殇</h3>							<span class="comment-date">2017年8月17日</span>
						</div>

						
						<div class="comment-content">
							<p>已经参加了众筹，也添加了私人微信，等待回复中！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=436#respond' onclick='return addComment.moveForm( "comment-436", "436", "respond", "2138" )' aria-label='回复给一曲秦殇'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-437">
				<div id="comment-437" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月17日</span>
						</div>

						
						<div class="comment-content">
							<p>已经加入，有时候工作忙，会在晚上或者中午吃饭时才看手机，有些延误，非常抱歉。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=437#respond' onclick='return addComment.moveForm( "comment-437", "437", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-443">
				<div id="comment-443" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/cc63767502d6e999e303d2f629f274bb-75.jpg' srcset='http://0.gravatar.com/avatar/cc63767502d6e999e303d2f629f274bb?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">gyt95</h3>							<span class="comment-date">2017年8月18日</span>
						</div>

						
						<div class="comment-content">
							<p>难以置信啊。。。。<br />
之前就是看vue文档和技术胖的视频以及github项目来写了一个比较完整的vue项目。<br />
然后今天真的是突发奇想不如入门一下react吧</p>
<p>但是react在网上的资源确实比vue要少，或者说是没那么容易弄懂吧</p>
<p>然后就去找文档和阮一峰的教程了。。。</p>
<p>看着看着想起技术胖的博客，上次来的时候是教weex，当时不太感兴趣就逃了。<br />
现在回来一看，哈哈，好巧啊，恰好是我想要的！</p>
<p>最后感谢技术胖~</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=443#respond' onclick='return addComment.moveForm( "comment-443", "443", "respond", "2138" )' aria-label='回复给gyt95'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-445">
				<div id="comment-445" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月18日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢你能记得技术胖的博客，最近都会更新React的视频教程，请有空就来学习一下，可以加入QQ群，群里有最新视频更新信息，能帮助你更好的学习。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=445#respond' onclick='return addComment.moveForm( "comment-445", "445", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-450">
				<div id="comment-450" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/396c1c419661292dbdf9b46e313c6d7e-75.jpg' srcset='http://0.gravatar.com/avatar/396c1c419661292dbdf9b46e313c6d7e?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小米</h3>							<span class="comment-date">2017年8月21日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥  看到你的东西 真的觉得 自己还有好多 东西要学！！！我会努力的！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=450#respond' onclick='return addComment.moveForm( "comment-450", "450", "respond", "2138" )' aria-label='回复给小米'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-452">
				<div id="comment-452" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月21日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢你一直一来的支持，让我们共同努力。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=452#respond' onclick='return addComment.moveForm( "comment-452", "452", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-461">
				<div id="comment-461" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/26d50219b2dcc02a30ecbf005e5a389b-75.jpg' srcset='http://2.gravatar.com/avatar/26d50219b2dcc02a30ecbf005e5a389b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">谢耳朵</h3>							<span class="comment-date">2017年8月22日</span>
						</div>

						
						<div class="comment-content">
							<p>完美！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=461#respond' onclick='return addComment.moveForm( "comment-461", "461", "respond", "2138" )' aria-label='回复给谢耳朵'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-472">
				<div id="comment-472" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ebea373808537640494ff5cb8a8d6024-75.jpg' srcset='http://2.gravatar.com/avatar/ebea373808537640494ff5cb8a8d6024?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">励志一生</h3>							<span class="comment-date">2017年8月24日</span>
						</div>

						
						<div class="comment-content">
							<p>感谢胖哥，在这学到好多东西~</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=472#respond' onclick='return addComment.moveForm( "comment-472", "472", "respond", "2138" )' aria-label='回复给励志一生'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-476">
				<div id="comment-476" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月24日</span>
						</div>

						
						<div class="comment-content">
							<p>非常高兴你能在这里学到东西，也希望你继续支持技术胖。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=476#respond' onclick='return addComment.moveForm( "comment-476", "476", "respond", "2138" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-520">
				<div id="comment-520" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/bb1c1d5163211691c6659e50a40fba89-75.jpg' srcset='http://2.gravatar.com/avatar/bb1c1d5163211691c6659e50a40fba89?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小江</h3>							<span class="comment-date">2017年9月5日</span>
						</div>

						
						<div class="comment-content">
							<p>问一下，讲完了?????<br />
什么时间出一个项目版的？？？？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=520#respond' onclick='return addComment.moveForm( "comment-520", "520", "respond", "2138" )' aria-label='回复给小江'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-552">
				<div id="comment-552" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/037b2fca3aad432ed213940bfb260d32-75.jpg' srcset='http://0.gravatar.com/avatar/037b2fca3aad432ed213940bfb260d32?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">wayne</h3>							<span class="comment-date">2017年9月12日</span>
						</div>

						
						<div class="comment-content">
							<p>讲的很好，谢谢胖哥</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=552#respond' onclick='return addComment.moveForm( "comment-552", "552", "respond", "2138" )' aria-label='回复给wayne'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-776">
				<div id="comment-776" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/417763054274f101a9c313aa96b62ad6-75.jpg' srcset='http://1.gravatar.com/avatar/417763054274f101a9c313aa96b62ad6?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">掌柜。</h3>							<span class="comment-date">2017年10月26日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥 getInitialState不是很早之前就弃用了吗</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/08/15/react_basic/?replytocom=776#respond' onclick='return addComment.moveForm( "comment-776", "776", "respond", "2138" )' aria-label='回复给掌柜。'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
        </ul><!-- .comment-list -->

        
        
    
    	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2017/08/15/react_basic/#respond" style="display:none;">取消回复</a></small></h3>			<form action="http://jspang.com/wp-comments-post.php" method="post" id="commentform" class="comment-form row">
				<div class="clearfix"></div><div class="col-md-12"><textarea id="comment" placeholder="Write your comment..." name="comment" aria-required="true"></textarea></div><div class="col-md-4"><input id="author" name="author" type="text" placeholder="Name *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="email" name="email" type="text" placeholder="Email *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="url" name="url" type="text" placeholder="Website" value="" size="30"/></div>
<p class="aiowps-captcha"><label for="aiowps-captcha-answer">请输入数字答案:</label><div class="aiowps-captcha-equation"><strong>10 &#43; 13 = <input type="hidden" name="aiowps-captcha-string-info" id="aiowps-captcha-string-info" value="67gh7oc91v" /><input type="hidden" name="aiowps-captcha-temp-string" id="aiowps-captcha-temp-string" value="1509364021" /><input type="text" size="2" id="aiowps-captcha-answer" name="aiowps-captcha-answer" value="" autocomplete="off" /></strong></div></p><p class="form-submit col-md-12"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='2138' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="c90063acfb" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="168"/></p>			</form>
			</div><!-- #respond -->
	</div>					</div>
				
			
					</div>

		<div class="col-md-4">
    <div class="primary-sidebar widget-area" role="complementary">
        <aside id="aster_about_base_widget-2" class="widget widget_aster_about_base_widget"><h1 class="widget-title text-uppercase">博主介绍</h1>			
			<div class="about-widget">
			
						
						<div class="about-me-content">技术胖：10年一线互联网程序开发经验（仍在一线奋战），做过J2EE、PHP和前端，现在主要关注前端领域。每年帮助50万以上前端爱好者学习。 除一线程序员外，博主还有以下身份，但只在装逼时使用。 掘金专栏作者，GitChat特邀讲师，纯金UED金牌讲师，CSDN学院知名讲师，百度传课前端讲师。</div>
				
			
			</div>
			
		</aside><aside id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" action="http://jspang.com/">
    <div class="aster-search-form">
		<input type="text" placeholder="Search and hit enter&hellip;" value="" name="s" id="s" />
	 </div>
</form></aside><aside id="text-2" class="widget widget_text"><h1 class="widget-title text-uppercase">公告</h1>			<div class="textwidget"><div></div>
<div style="color: #f44336; font-weight: blod;">广告事宜请联系：QQ：454275609</p>
<hr />
<p><strong>QQ群1：364140450(满)</strong></p>
</div>
<div style="color: #f44336; font-weight: blod;"><strong>QQ群2：524520566（600人）</strong></div>
<div style="color: #f44336; font-weight: blod;">进群和2000多名前端关注者一起进步，<br />
我每周都会上线解答群内问题。</div>
<hr />
<ul>
<li>《webpack3.x 成神之路》更新完成。</li>
<li>开始更新《React全家桶》教程，每周三节，请小伙伴关注。</li>
<li>在看视频课程中，如果有疑问，可以发邮件给技术胖。邮件地址：web0432@126.com ,技术胖会在下班后给你回复邮件，解决你的问题。</li>
</ul>
</div>
		</aside><aside id="text-6" class="widget widget_text"><h1 class="widget-title text-uppercase">如果文章对您有帮助，请打赏：</h1>			<div class="textwidget"><p>						<style>
				
					#tab_container_1817 {
				overflow:hidden;
				display:block;
				width:100%;
				border:0px solid #ddd;
				margin-bottom:30px;
				}

#tab_container_1817 .tab-content{
		padding:20px;
		border: 1px solid #e6e6e6 !important;
		margin-top: 0px;
		background-color:#ffffff !important;
		color: #000000 !important;
		font-size:16px !important;
		font-family: Open Sans !important;
		
				border: 1px solid #e6e6e6 !important;
		}
#tab_container_1817 .wpsm_nav-tabs {
    border-bottom: 0px solid #ddd;
}
#tab_container_1817 .wpsm_nav-tabs > li.active > a, #tab_container_1817 .wpsm_nav-tabs > li.active > a:hover, #tab_container_1817 .wpsm_nav-tabs > li.active > a:focus {
	color: #000000 !important;
	cursor: default;
	background-color: #ffffff !important;
	border: 1px solid #e6e6e6 !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a {
    margin-right: 0px !important; 
    line-height: 1.42857143 !important;
    border: 1px solid #d50000 !important;
    border-radius: 0px 0px 0 0 !important; 
	background-color: #e80606 !important;
	color: #000000 !important;
	padding: 15px 18px 15px 18px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	text-align:center !important;
	font-family: Open Sans !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:focus {
outline: 0px !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:before {
	display:none !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:after {
	display:none !important ;
}
#tab_container_1817 .wpsm_nav-tabs > li{
padding:0px !important ;
margin:0px;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:hover , #tab_container_1817 .wpsm_nav-tabs > li > a:focus {
    color: #000000 !important;
    background-color: #e80606 !important;
	border: 1px solid #d50000 !important;
	
}
#tab_container_1817 .wpsm_nav-tabs > li > a .fa{

margin-right:5px !important;

margin-left:5px !important;


}

		#tab_container_1817 .wpsm_nav-tabs a{
			background-image: url(style/images/img/style-noise.png);
			background-position: 0 0;
			background-repeat: repeat-x;
			}
			


#tab_container_1817 .wpsm_nav-tabs > li {
    float: left;
    margin-bottom: -1px !important;
	margin-right:0px !important; 
}


#tab_container_1817 .tab-content{
overflow:hidden !important;
}


@media (min-width: 769px) {

	#tab_container_1817 .wpsm_nav-tabs > li{
	float:left !important ;
		margin-right:-1px !important;
			}
	#tab_container_1817 .wpsm_nav-tabs{
	float:none !important;
	margin:0px !important;
	}

	/* Margin CSS FOR Horizontal */
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}

}



@media (max-width: 768px) {
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}
}


.wpsm_nav-tabs li:before{
display:none !important;
}

@media (max-width: 768px) {
		
		.wpsm_nav-tabs{
		margin-left:0px !important;
		margin-right:0px !important; 
		
	}
		#tab_container_1817 .wpsm_nav-tabs > li{
		float:none !important;
	}
		
	
}
				</style>
				<div id="tab_container_1817" >
	 
					<ul class="wpsm_nav wpsm_nav-tabs" role="tablist" id="myTab_1817">
							
							<li role="presentation"  class="active"  >
								<a href="#tabs_desc_1817_1" aria-controls="tabs_desc_1817_1" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏5元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_2" aria-controls="tabs_desc_1817_2" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏15元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_3" aria-controls="tabs_desc_1817_3" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏29元</span>
											
																						
																				
										
									
								</a>
							</li>
											 </ul>

					  <!-- Tab panes -->
					  <div class="tab-content" id="tab-content_1817">
												 <div role="tabpanel" class="tab-pane  in active " id="tabs_desc_1817_1">
								<img src="style/images/weixin05.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_2">
								<img src="style/images/weixin15.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_3">
								<img src="style/images/weixin29.jpg" width="100%" " class="alignnone size-medium" />						 </div>
							
					 </div>
					 
				 </div>
 <script>
		jQuery(function () {
			jQuery('#myTab_1817 a:first').tab('show')
		});
		
				jQuery(function(){
			var b="fadeIn";
			var c;
			var a;
			d(jQuery("#myTab_1817 a"),jQuery("#tab-content_1817"));function d(e,f,g){
				e.click(function(i){
					i.preventDefault();
					jQuery(this).tab("show");
					var h=jQuery(this).data("easein");
					if(c){c.removeClass(a);}
					if(h){f.find("div.active").addClass("animated "+h);a=h;}
					else{if(g){f.find("div.active").addClass("animated "+g);a=g;}else{f.find("div.active").addClass("animated "+b);a=b;}}c=f.find("div.active");
				});
			}
		});
			</script>
				
			<br />
<span style="color: red;">打赏后你将获得以下特权：</span></p>
<p>1.加入技术胖前端微信交流群。<br />
2.收听《前端成神软技能》语音分享版。<br />
3.和10年程序老司机（技术胖）成为微信好友。<br />
4.获得本站前端视频离线高清版。</p>
<hr />
<p><span style="color: red;">打赏后获得特权流程：</span><br />
1.扫二维码添加技术胖私人微信。<br />
<img src="style/images/232323121111111111.jpg" width="50%" /></p>
<p>2.添加微信成功后，发送打赏截图。</p>
<p>3.技术胖拉你入群，查看群公告。</p>
</div>
		</aside><aside id="text-8" class="widget widget_text"><h1 class="widget-title text-uppercase">视频教程</h1>			<div class="textwidget"><p>最新视频</p>
<ol>
<li><a href="http://jspang.com/2017/06/03/es6/" rel="bookmark">技术胖带你玩转ES6视频教程</a></li>
</ol>
<p>Vue视频合集-<small>可按此顺序学习</small></p>
<ol>
<li><a href="http://jspang.com/2017/02/23/vue2_01/" rel="bookmark">【第一季】VUE2.0内部指令(共8集)</a></li>
<li><a href="http://jspang.com/2017/03/14/vue2_02/" rel="bookmark">【第二季】VUE2.0全局API(共9集)</a></li>
<li><a href="http://jspang.com/2017/03/26/vue3/" rel="bookmark">【第三季】VUE2.0选项（共6集）</a></li>
<li><a href="http://jspang.com/2017/04/09/vue2_4/" rel="bookmark">【第四季】VUE2.0实例内置组件（共4集）</a></li>
<li><a href="http://jspang.com/2017/04/10/vue-cli/" rel="bookmark">技术胖的VUE-CLI 视频教程</a></li>
<li><a href="http://jspang.com/2017/04/13/vue-router/" rel="bookmark">技术胖的VUE-ROUTER视频教程</a></li>
<li><a href="http://jspang.com/2017/05/03/vuex/" rel="bookmark">技术胖的VUEX视频教程</a></li>
<li><a href="http://jspang.com/2017/05/22/vuedemo/" rel="bookmark">VUE实战视频-快餐店收银系统</a></li>
</ol>
<hr />
<p>CocosCreator视频（前端游戏制作）</p>
<ol>
<li><a href="http://jspang.com/category/learn/jichu/">CC基础视频教程</a></li>
<li><a href="http://jspang.com/category/learn/shizhan/">CC实战-勇闯地下室</a></li>
</ol>
<hr />
<p>其它视频</p>
<ol>
<li><a href="http://jspang.com/2016/11/24/webpack/">Webpack基础视频</a></li>
<li><a href="http://jspang.com/2017/01/11/fabricjsbasic/" rel="bookmark">步入FABRIC.JS 中文视频教程</a></li>
</ol>
</div>
		</aside><aside id="text-5" class="widget widget_text"><h1 class="widget-title text-uppercase">捐赠墙</h1>			<div class="textwidget">
<hr/>
<div>以下人员在服务器购买费用中捐款，所以本站由以下人员共同建立。2017年5月22日重新上线。</div>
<div style="color:#f44336;border-bottom:1px solid #e0e0e0;padding:10px 0px;" >土豪榜</div>
<div>
高丽-59元，
周老六-147元，
风飞沙-118元
</div>
<div  style="color:#f44336;border-bottom:1px solid #e0e0e0;;padding:10px 0px;">真情铁粉</div>
<div>
婷婷-19元，
fillter-29元，
军哥哥-29元，
贪吃鱼儿-29元，
妖妖-29元，
追风-48元，
吴思超-29元，
金秀学-29元，
十月弓虽-29元，
谭兵-29元，
千夜一夕-29元，
jason-29元，
上帝没给答案-19元，
土豆-19元，
Tempest-29元，
馥镬-29，
詹小云-19元，
hasaki-29元，
落_尘-29元，
汪胜强-29元，
ginway-29元，
吕檀溪-29元，
Arical-29元，
lishalom-29元，
桂玉青-19元，
张杨-19元，
Peach-29元，
国豪-19元，
Kevin-29元，
孟凡兴-29元，
谢启鸿-19元，
bwhite-29元，
null-29元，
yuyi_guo-19元，
张易得-29元，
Rewa-Fang-29元，
小钟-29元，
木白-29元，
jackyrong-19元，
咚咚-29元，
笑容-29元，
vanjon-29元，
一曲琴殇-19元，
橙橙同学-29元，
王畅-19元，
咚咚-29元，
野蛮的橘子-29元，
路道老粗-29元，
建豪-29元

</div>
</div>
		</aside>    </div>
</div>

	</div>
</div>

<footer id="footer">
	<div class="copy-right-text text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>Copyright &copy; 2017 <a href="http://jspang.com/" rel="home">技术胖-胜洪宇关注web前端技术</a>. All rights reserved.<br>Powered by <a href="http://jspang.com">jspang.com</a>.备案号 <a href="http://icp.chinaz.com/info?q=jspang.com">吉ICP备11005377号-3</a></p>
				</div>
			</div>
		</div>
	</div><!-- /Copyright Text -->
</footer><!-- /#Footer -->


<div class="scroll-up">
    <a href="#"><i class="fa fa-angle-up"></i></a>
</div>
<!-- Scroll Up -->

<link rel='stylesheet' id='wechat-reward-css'  href='style/css/wechat-reward.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/smartideo.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"\u663e\u793a","visibility_hide":"\u9690\u85cf","width":"Auto"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/front.min.js'></script>
<script type='text/javascript' src='style/js/bootstrap.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","post_id":"2138"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/postviews-cache.js'></script>
<script type='text/javascript' src='style/js/bootstrap.min.js'></script>
<script type='text/javascript' src='style/js/smoothscroll.js'></script>
<script type='text/javascript' src='style/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='style/js/jquery.fitvids.js'></script>
<script type='text/javascript' src='style/js/imagesloaded.min.js'></script>
<script type='text/javascript' src='style/js/masonry.min.js'></script>
<script type='text/javascript' src='style/js/jquery.masonry.min.js'></script>
<script type='text/javascript' src='style/js/scripts.js'></script>
<script type='text/javascript' src='style/js/comment-reply.min.js'></script>
<script type='text/javascript' src='style/js/wp-embed.min.js'></script>
<script type='text/javascript' src='style/js/wechat-reward.js'></script>
<script type='text/javascript' src='style/js/form.js'></script>
	    <script type="type/html" id="xhshop_payment_gateways_jspai_html">
    	    <div id="xhshop-pay-callback-payment-gateway">
    		<div class="xunhupay open"  onclick="window.XHSHOP.payment_gateway.hide();"></div>
        		<ul class="xunhupay-list" id="xunhupay-list" style="display: none;">
            		<li class="xunhupay-loading" style="border-top:0;display:none;"></li>
            		<li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-alipay-payment');"  class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon.png) center no-repeat;"></i><span>点击付款</span></li><li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-wechat-payment');" style="border-bottom:0" class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon01.png) center no-repeat;"></i><span>点击付款</span></li>            		<li class="xunhupay-close" onclick="window.XHSHOP.payment_gateway.hide();"></li>
        		</ul>
    		</div>
		</script>
				<script type="text/javascript">
		(function($){
			if(!window.XHSHOP){window.XHSHOP={};}
			window.XHSHOP.url_ajax ='http://jspang.com/wp-admin/admin-ajax.php';
			window.XHSHOP.alert=function(msg){alert(msg);};
			window.XHSHOP.beforeSend=function(){$('.xunhupay-loading').css('display','block');};
			window.XHSHOP.complete=function(){};
			window.XHSHOP.error=function(e){window.XHSHOP.alert("系统异常，请稍候重试！");};
			window.XHSHOP.finish=function(){$('.xunhupay-loading').css('display','none');};
			window.XHSHOP.unauth =function(callback){(function(){location.href="/wp-login.php?redirect_to="+encodeURIComponent(location.href.toString());})();};
	
			window.XHSHOP.pay=function(data){
							    window.XHSHOP.payment_gateway.show(data);
			    			};
			
			window.XHSHOP.payment_gateway={
					__data:null,
					__beforeSends:[window.XHSHOP.beforeSend],
					__completes:[window.XHSHOP.complete],
					__finishs:[window.XHSHOP.finish],
					show:function(data){
						window.XHSHOP.payment_gateway.__data=data;
						window.XHSHOP.payment_gateways_templete=$('#xhshop_payment_gateways_jspai_html').html();
						
												
						window.XHSHOP.payment_gateway.hide();
				 		$('body').append(window.XHSHOP.payment_gateways_templete);
				 		$('#xunhupay-list').fadeIn();
				 		window.XHSHOP.payment_gateway.__resize();
				 		
				 							},
					__resize : function(){
			 			if(document.documentElement.clientWidth<=450){
			 				return;
			 			}
						var d = document.getElementById('xunhupay-list');
						if(d==null){return;}
						d.style.top = ((document.documentElement.clientHeight - d.offsetHeight) / 2) + "px";
						d.style.left = ((document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
			 		},
					hide:function(){
												var $gateway =$('#xhshop-pay-callback-payment-gateway');
						if($gateway.length>0){
							$gateway.remove();
						}
											},
					submit:function(payment_gateway_id){
						var data =window.XHSHOP.payment_gateway.__data;
						if(!data){data={};}
						data.action='XHSHOP_SHIPPINGS_SIMPLE_PAY';
						data.callback='?';
						data.call_url=encodeURIComponent(location.href.toString());
						data.payment_gateway=payment_gateway_id;
						$.ajax({
							url:window.XHSHOP.url_ajax,
							type:'post',
							timeout:60*1000,
							async:true,
							cache:false,
							data:data,
							traditional:false,
							dataType: "jsonp",
							jsonp: "callback", 
							beforeSend:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__beforeSends.length;i++){
									window.XHSHOP.payment_gateway.__beforeSends[i]();
								}
							},
							complete:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__completes.length;i++){
									window.XHSHOP.payment_gateway.__completes[i]();
								}
							},
							success:function(call){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								if(!call){
									return;
								}
								
								if(call.errcode!=0){
									if(call.errcode==501){
										window.XHSHOP.unauth();
										return;
									}
									
																		window.XHSHOP.payment_gateway.hide();
									window.XHSHOP.alert('errcode:'+call.errcode+';errmsg:'+call.errmsg);
									return;
								}
								
																$('body').append('<div style="display:none;">'+call.errmsg+'</div>');
							},
							error:function(e){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								console.warn(e.responseText);
								window.XHSHOP.error(e);
								window.XHSHOP.payment_gateway.hide();
							}
						});
					}
    			};
    		})(jQuery);
		</script>
	    
</body>
</html>

<!-- Dynamic page generated in 7.378 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-10-30 19:47:01 -->

<!-- Compression = gzip -->